<template>
  <div>
    <div ref="editor" style="height: 500px; width: 30%;"></div>
    <button @click="getContent">获取内容</button> <span> <br>{{editorValue}}</span>
    <span>值: {{value}}</span>
  </div>

</template>

<script>
// import ace from 'ace-builds';
import 'ace-builds/src-noconflict/mode-javascript'; // 根据需要加载相应的mode
import 'ace-builds/src-noconflict/theme-monokai'; // 根据需要加载相应的theme

export default {
  name: 'AceEditor',
  props: {
    value: {
      type: String,
      default: ''
    },
    language: {
      type: String,
      default: 'javascript'
    },
    theme: {
      type: String,
      default: 'monokai'
    },
    readOnly: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      editorValue: ''
    }
  },
  methods: {
    // 1.获取编辑器内容
    // 2.自动补全
    // 3.编辑器高亮

    getContent() {
      this.editorValue =  this.editor.getValue();
    },
  },
  watch: {
    value(newVal) {
      if (newVal !== this.editor.getValue()) {
        this.editor.setValue(newVal, 1); // move cursor to the end
        console.log(newVal);
      }
    }
  },
  mounted() {
    // this.editor = ace.edit(this.$refs.editor);
    this.editor.session.setMode(`ace/mode/${this.language}`);
    this.editor.setTheme(`ace/theme/${this.theme}`);
    this.editor.setValue(this.value, 1); // move cursor to the end

    this.editor.on('change', () => {
      const content = this.editor.getValue();
      this.$emit('input', content);
    });

    this.editor.setOptions({
      readOnly: this.readOnly,
      enableBasicAutocompletion: true,
      enableLiveAutocompletion: true
    });
  }
};
</script>

<style scoped>
/* Add any additional styling if necessary */
</style>
